<template>
  <w-view>
    <layout-property :w="w" />
  </w-view>
</template>

<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Grid',
        remark: '栅格布局。内部widget可用colspan和rowspan来指定跨行跨列。默认情况下每个单元格占满一行。',
        attrs: [{
            name: 'columns',
            remark: '列数，也可指定列样式',
            type: 'Number / String',
            default: '12',
            option: '<div>如果是数字，则为指定列数</div><div>如果是字串，则对应CSS属性: grid-template-columns</div>'
          }, {
            name: 'rows',
            remark: '行数，也可指定行样式',
            type: 'Number / String',
            default: '12',
            option: '<div>如果是数字，则为指定列数</div><div>如果是字串，则对应CSS属性: grid-template-rows</div>'
          }, {
            name: 'face',
            remark: '展示效果',
            type: 'String',
            option: '<var>normal</var><var>cell</var>',
            default: 'normal'
          }, {
            name: 'default-colspan',
            remark: '子节点的默认跨列',
            type: 'Number',
            option: '可以是-1或正整数。-1代表跨一整行',
            default: '-1'
          }, {
            name: 'scroll-x',
            remark: '是否有横向滚动条',
            type: 'Boolean',
          },
          {
            name: 'scroll-y',
            remark: '是否有纵向滚动条',
            type: 'Boolean',
          },
        ],
        css: [{
            name: '--w-grid-cell-border-color',
            remark: '设置face="cell"时，边线的颜色',
            default: '#ddd'
          },
          {
            name: '--w-grid-cell-label-background-color',
            remark: '设置face="cell"时，表单Label的背景色',
            default: '#f9f9f9'
          },
        ],
        examples: [{
          remark: '表单',
          type: 'html',
          view: true,
          code: `
            <w-grid :gap="10">
              <w-text colspan="6" :label="{text:'姓名'}"></w-text>
              <w-datepicker colspan="6" :label="{text:'生日'}"></w-datepicker>
              <w-text colspan="12" :label="{text:'地址'}"></w-text>
            </w-grid>
            `
        }, {
          remark: '网格线表单',
          type: 'html',
          view: true,
          code: `
            <w-grid :gap="0" face="cell">
              <w-form colspan="6" :label="{text:'姓名'}">李德胜</w-form>
              <w-datepicker colspan="6" :label="{text:'生日'}" input-width="*"></w-datepicker>
              <w-text colspan="6" :label="{text:'地址'}"></w-text>
              <w-text colspan="6" :label="{text:'身份证'}"></w-text>
            </w-grid>
            `
        }, {
          remark: '跨行布局；第一列固定宽度',
          type: 'html',
          view: true,
          code: `
            <w-grid :gap="0" face="cell" columns="120px auto" default-colspan="1" style="--w-grid-cell-border-color:lightcoral">
              <w-form rowspan="2" align="center">高一年级</w-form>
              <w-form>高一(1)班</w-form>
              <w-form>高一(2)班</w-form>
              <w-form rowspan="2" align="center">高二年级</w-form>
              <w-form>高二(1)班</w-form>
              <w-form>高二(2)班</w-form>
            </w-grid>
            `
        }, {
          remark: '有间隔的布局',
          type: 'html',
          view: true,
          code: `
            <w-grid height="200" gap="10" rows="50px auto">
              <w-html colspan="6" style="background:lightcoral">1</w-html>
              <w-html colspan="6" style="background:lightblue">2</w-html>
              <w-html colspan="6" style="background:lightpink">3</w-html>
              <w-html colspan="6" style="background:lightsalmon">4</w-html>
              <w-html colspan="12" style="background:lightseagreen">5</w-html>
            </w-grid>
            `
        }]
      }
    },
  }
</script>

<style>
.a {
	background-color: lightseagreen;
}
</style>
